var projects = {
        hw_projects:[
            {name:"华为T&M合作模式项目",value:"hw_tm",description:"说明：工时物料（T&M）指符合华为合同要求的前提下，按照合作方实际投入的工时和物料核算合同费用的商务模式。对软件外包项目而言合同而言，一般依据合作方提供的人员职级和有效工时进行结算。"},
            {name:"华为F&P合作模式项目",value:"hw_fp",description:"说明：固定价格（FP）指软件外包合同在约定的工作范围内，合同费用事先已经确定的商务模式，除非发生明显的工作范围变更。"},
            {name:"华为产品合作模式项目",value:"hw_cp",description:"说明：产品合作模式指华为一线市场对合作方提供自主研发的软件类产品整合华为产品打包向客户销售；或指华为提供平台，合作方借助平台开发相应的功能模块软件，由华为一线市场打包销售给客户。"},
            {name:"华为无PO交付模式项目",value:"hw_nopo",description:"说明：无PO交付是指未得到PO订单就开始向华为进行交付工作，该交付模式存在结算风险；无PO交付模式所有的相关支出将挂在其它已有PO订单的项目中。无PO交付最长时间周期为2个月，最高支出成本不得超过10万元。    "}
        ],
        nohw_projects:[
            {name:"非华为T&M合作模式项目",value:"hw_tm",description:"说明：工时物料（T&M）指符合华为合同要求的前提下，按照合作方实际投入的工时和物料核算合同费用的商务模式。对软件外包项目而言合同而言，一般依据合作方提供的人员职级和有效工时进行结算。"},
            {name:"非华为F&P合作模式项目",value:"hw_fp",description:"说明：固定价格（FP）指软件外包合同在约定的工作范围内，合同费用事先已经确定的商务模式，除非发生明显的工作范围变更。"},
            {name:"非华为产品合作模式项目",value:"hw_cp",description:"说明：产品合作模式指华为一线市场对合作方提供自主研发的软件类产品整合华为产品打包向客户销售；或指华为提供平台，合作方借助平台开发相应的功能模块软件，由华为一线市场打包销售给客户。"},
            {name:"非华为无PO交付模式项目",value:"hw_nopo",description:"说明：无PO交付是指未得到PO订单就开始向华为进行交付工作，该交付模式存在结算风险；无PO交付模式所有的相关支出将挂在其它已有PO订单的项目中。无PO交付最长时间周期为2个月，最高支出成本不得超过10万元。    "}

        ],
        inner_projects:[
            {name:"华为T&M合作模式项目",value:"hw_tm",description:"说明：工时物料（T&M）指符合华为合同要求的前提下，按照合作方实际投入的工时和物料核算合同费用的商务模式。对软件外包项目而言合同而言，一般依据合作方提供的人员职级和有效工时进行结算。"},
            {name:"华为F&P合作模式项目",value:"hw_fp",description:"说明：固定价格（FP）指软件外包合同在约定的工作范围内，合同费用事先已经确定的商务模式，除非发生明显的工作范围变更。"},
            {name:"华为产品合作模式项目",value:"hw_cp",description:"说明：产品合作模式指华为一线市场对合作方提供自主研发的软件类产品整合华为产品打包向客户销售；或指华为提供平台，合作方借助平台开发相应的功能模块软件，由华为一线市场打包销售给客户。"},
            {name:"华为无PO交付模式项目",value:"hw_nopo",description:"说明：无PO交付是指未得到PO订单就开始向华为进行交付工作，该交付模式存在结算风险；无PO交付模式所有的相关支出将挂在其它已有PO订单的项目中。无PO交付最长时间周期为2个月，最高支出成本不得超过10万元。    "}
        ]
};

var HwProjectBox = React.createClass({
    getInitialState:function(){
        return projects;
    },
    render:function(){
        return <section className="panel">
            <header className="panel-heading">请选择您要新建的项目合作商务模式</header>
            <div className="panel-body">
            <ProjectList data={this.state.hw_projects}/>
        </div>
        </section>;
    }
});


var NoHwProjectBox = React.createClass({
    getInitialState:function(){
        return projects;
    },
    render:function(){
        return <section className="panel">
                <header className="panel-heading">请选择您要新建的项目合作商务模式</header>
                <div className="panel-body">
                    <ProjectList data={this.state.nohw_projects}/>
                </div>
               </section>;
    }
});


var InnerProjectBox = React.createClass({
    getInitialState:function(){
        return projects;
    },
    render:function(){
        return <section className="panel">
            <header className="panel-heading">请选择您要新建的项目合作商务模式</header>
            <div className="panel-body">
            <ProjectList data={this.state.inner_projects}/>
        </div>
        </section>;
    }
});

var projectItemCnt = 0;

var ProjectItem = React.createClass({

    isSelected:function(){

        return projectItemCnt == 1?true:false;
    },
    render:function(){

        return <li>
            <label className="project_item">
                <h3 className="col-lg-4"  ><input className="col-lg-1" type="radio" name="project_type" value={this.props.value} defaultChecked = { this.isSelected() } />{this.props.name}</h3>
                <p  className="col-lg-8" >{this.props.description}</p>
            </label>
            </li>
    },
    componentWillMount:function(){
        projectItemCnt+=1;
    }
});

var ProjectList = React.createClass({

    render:function(){

        if(!this.props.data){
            return false;
        }

        var ProjectNodes = this.props.data.map(function(project,i){
            return <ProjectItem key={i} name={project.name} description={project.description} value={project.value}></ProjectItem>
        });

        return <ul className="list-unstyled row">
                {ProjectNodes}
                </ul>;
    }
});

var hwPojects = ReactDOM.render(
        <HwProjectBox/>,
    document.getElementById("hw_projects")
);

var hwPojects = ReactDOM.render(
        <NoHwProjectBox/>,
    document.getElementById("nohw_projects")
);

var hwPojects = ReactDOM.render(
        <InnerProjectBox/>,
    document.getElementById("inner_projects")
);

$("#next").click(function(){
    console.log($("input[name=project_type]:checked").val());
});
